<template>
  <Layout>
    <ul v-if="groupList.length!==0">
      <li v-for="(item,index) in formatList" :key="index">
        <span class="icon-wrapper" :style="`background: ${colorList[item.account.name]}`"><Icon
          :name="item.account.name"></Icon></span>
        <div class="info">
          <span>{{item.account.text}}</span>
          <span class="info2">{{item.account.detail}}{{item.account.type}}</span>
        </div>
        <div class="money">
          <span>-{{item.totalOut.toFixed(2)}}</span>
          <span>+{{item.totalIn.toFixed(2)}}</span>
        </div>
      </li>
    </ul>
    <div v-else class="noResult">
      {{`-本月没有收支记录哦-`}}
    </div>
  </Layout>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import clone from '@/lib/clone';

  @Component
  export default class Account extends Vue {
    beforeCreate() {
      this.$store.commit('initLayoutData');
      this.$store.commit('initRecordList');
    }

    colorList = {
      'alipay': '#108DE9',
      'cashier': '#FEAC25',
      'ICBC': '#E05960',
      'more': '#D9D9D9',
    };

    recordList = this.$store.state.recordList;

    get groupList() {
      const {recordList} = this;
      if (recordList.length === 0) return [];

      const newRecordList: RecordItem[] = clone(recordList)
        .filter((r: RecordItem) => r.createdAt!.startsWith(this.$store.state.layoutData.interval));

      if (newRecordList.length === 0) return [];

      let inSum = 0;
      let outSum = 0;

      for (let i = 0; i < newRecordList.length; i++) {
        (newRecordList[i].type === '-') && (outSum += newRecordList[i].amount);
        (newRecordList[i].type === '+') && (inSum += newRecordList[i].amount);
      }

      this.$store.state.layoutData.payoutSum = outSum;
      this.$store.state.layoutData.incomeSum = inSum;

      return newRecordList;
    }

    get formatList() {
      if (this.groupList.length === 0) return [];

      type ResultItem = {
        account: AccountItem;
        totalIn: number;
        totalOut: number;
      }
      const result: ResultItem[] = [];

      for (let i = 0; i < this.groupList.length; i++) {
        let index = -1;
        for (let j = 0; j < result.length; j++) {
          if (result[j].account.text === this.groupList[i].account.text) {
            index = j;
            break;
          }
        }
        if (index === -1) {
          const resultItem = {account: this.groupList[i].account, totalIn: 0, totalOut: 0};
          (this.groupList[i].type === '+') && (resultItem.totalIn = this.groupList[i].amount);
          (this.groupList[i].type === '-') && (resultItem.totalOut = this.groupList[i].amount);
          result.push(resultItem);
        } else {
          (this.groupList[i].type === '+') && (result[index].totalIn += this.groupList[i].amount);
          (this.groupList[i].type === '-') && (result[index].totalOut += this.groupList[i].amount);
        }
      }
      return result;
    }
  }
</script>

<style lang='scss' scoped>
  ul {
    background-color: white;

    > li {
      display: flex;
      align-items: center;
      margin-left: 10px;
      padding: 24px 10px 24px 0;
      border-bottom: 1px solid #e6e6e6;

      > .icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3em;
        height: 3em;
        background-color: #00A1E9;

        > .icon {
          width: 1.5em;
          height: 1.5em;
        }
      }

      > .info {
        height: 3em;
        padding-left: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        > .info2 {
          font-size: 14px;
          color: #999999;
        }
      }

      > .money {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        line-height: 3em;
        color: #999999;

        > span {
          line-height: 24px;
        }
      }
    }
  }

  .noResult {
    color: #999;
    text-align: center;
    padding: 16px;
  }
</style>